<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>哈基米加密器</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body {
      font-family: 'Segoe UI', 'Roboto', sans-serif;
      animation: fadeIn 1s ease-in-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .glass {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .glow-btn {
      transition: all 0.2s ease;
      box-shadow: 0 0 10px #6366f1, 0 0 30px #6366f1;
    }
    .glow-btn:active {
      transform: scale(0.95);
      box-shadow: 0 0 5px #6366f1, 0 0 10px #6366f1;
    }
    .section-anim {
      animation: slideUp 0.8s ease;
    }
    @keyframes slideUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
  </style>
</head>
<body class="bg-gradient-to-br from-gray-900 via-black to-gray-800 min-h-screen flex items-center justify-center px-4 py-10 text-white">

  <div class="w-full max-w-4xl glass rounded-3xl p-6 md:p-10 space-y-10 shadow-2xl section-anim">

    <h1 class="text-4xl md:text-5xl font-extrabold text-center text-indigo-400 tracking-widest">哈基米加密器</h1>
    <p class="text-center text-gray-300 text-lg">哈基米密文 支持加密 & 解密</p>

    <!-- 原文输入 -->
    <div class="section-anim">
      <label class="block text-lg mb-2 text-indigo-200">原文输入</label>
      <textarea id="inputText" rows="4" class="w-full p-4 bg-black/30 border border-indigo-500 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-400 resize-none text-white placeholder-gray-400" placeholder="输入需要加密的文字..."></textarea>
      <button onclick="encryptText()" class="mt-4 w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-xl glow-btn">加密</button>
    </div>

    <!-- 加密结果 -->
    <div class="relative section-anim">
      <label class="block text-lg mb-2 text-indigo-200">加密结果（哈基米密文）</label>
      <textarea id="encryptedText" rows="4" class="w-full p-4 pr-24 bg-black/20 border border-indigo-400 rounded-xl resize-none text-indigo-200" readonly></textarea>
      <button onclick="copyEncryptedText()" class="absolute top-10 right-4 px-3 py-1.5 bg-indigo-500 hover:bg-indigo-600 text-white text-sm rounded-md glow-btn">复制</button>
      <p id="copyTip" class="text-sm text-green-400 mt-2 hidden">已复制！^_^</p>
    </div>

    <!-- 哈基米输入 -->
    <div class="section-anim">
      <label class="block text-lg mb-2 text-green-200">输入哈基米密文</label>
      <textarea id="hashText" rows="4" class="w-full p-4 bg-black/30 border border-green-400 rounded-xl focus:outline-none focus:ring-2 focus:ring-green-400 resize-none text-white placeholder-gray-400" placeholder="输入加密后的哈基米文本..."></textarea>
      <button onclick="decryptText()" class="mt-4 w-full py-3 bg-green-600 hover:bg-green-700 text-white font-bold rounded-xl glow-btn">解密</button>
    </div>

    <!-- 解密结果 -->
    <div class="section-anim">
      <label class="block text-lg mb-2 text-green-200">解密结果</label>
      <textarea id="decryptedText" rows="4" class="w-full p-4 bg-black/20 border border-green-400 rounded-xl resize-none text-green-200" readonly></textarea>
    </div>

    <!-- Footer -->
    <footer class="text-center text-sm text-gray-500 pt-6 border-t border-white/20">
      Made with love by <a href="https://github.com/a4909" target="_blank" class="text-indigo-400 hover:underline font-semibold">a4909 on Github</a>
    </footer>
  </div>

  <script>
    const map = ['哈', '基', '米'];

    function textToHajimi(text) {
      return [...new TextEncoder().encode(text)]
        .map(byte => byte.toString(3).padStart(6, '0'))
        .join('')
        .split('')
        .map(d => map[parseInt(d)])
        .join('');
    }

    function hajimiToText(hjm) {
      const reverseMap = { '哈': '0', '基': '1', '米': '2' };
      let digits = hjm.split('').map(c => reverseMap[c]).join('');
      let bytes = [];
      for (let i = 0; i < digits.length; i += 6) {
        let byteStr = digits.slice(i, i + 6);
        if (byteStr.length < 6) break;
        let byte = parseInt(byteStr, 3);
        bytes.push(byte);
      }
      return new TextDecoder().decode(new Uint8Array(bytes));
    }

    function encryptText() {
      const input = document.getElementById("inputText").value;
      document.getElementById("encryptedText").value = textToHajimi(input);
      document.getElementById("copyTip").classList.add("hidden");
    }

    function decryptText() {
      const input = document.getElementById("hashText").value;
      try {
        document.getElementById("decryptedText").value = hajimiToText(input);
      } catch {
        document.getElementById("decryptedText").value = "解密失败，可能是密文错误或不完整。T^T";
      }
    }

    function copyEncryptedText() {
      const encrypted = document.getElementById("encryptedText").value;

      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(encrypted).then(() => {
          showCopiedTip();
        }).catch(() => {
          fallbackCopy(encrypted);
        });
      } else {
        fallbackCopy(encrypted);
      }
    }

    function fallbackCopy(text) {
      const temp = document.createElement("textarea");
      temp.value = text;
      document.body.appendChild(temp);
      temp.style.position = "fixed";
      temp.style.opacity = 0;
      temp.focus();
      temp.select();
      try {
        document.execCommand("copy");
        showCopiedTip();
      } catch (err) {
        alert("复制失败，请手动选中文本。");
      }
      document.body.removeChild(temp);
    }

    function showCopiedTip() {
      const tip = document.getElementById("copyTip");
      tip.classList.remove("hidden");
      setTimeout(() => tip.classList.add("hidden"), 2000);
    }
  </script>
</body>
</html>